<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="layui/dist/layui.js" charset="utf-8"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
	<table class="layui-hide" id="test" lay-filter="test"></table>
	
</body>

<script type="text/javascript">
layui.use('table', function(){
	  var table = layui.table
	  ,form = layui.form
	  
	   table.render({
	    elem: '#test'
	    ,url:"/TzCategory/test"
	    ,toolbar: '#toolbarDemo'
	    ,title: '用户数据表'
	    ,totalRow: true
	    ,cols: [[
	      {type: 'checkbox', fixed: 'left'}
	      ,{field:'id', title:'ID', width:180}
	      ,{field:'content', title:'公告内容', width:420}
	      ,{field:'status', title:'状态', width:200}
	      ,{field:'istop', title:'是否顶置', width:200}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
	    ]]
	    ,page: true
	    , request: {                              //request设置，默认值如下
	        pageName: 'page',
	        limitName: 'limit'
	    }
	   
	  });  

	//监听工具条 
	  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	    var data = obj.data; //获得当前行数据
	    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
	   
	    if(layEvent === 'detail'){ //查看
	      //do somehing
	    } else if(layEvent === 'del'){ //删除
	      layer.confirm('真的删除行么', function(index){
	        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	        layer.close(index);
	        //向服务端发送删除指令
	      });
	    } else if(layEvent === 'edit'){ //编辑
	      //do something
	        //iframe层
	        layer.open({
	          type: 2,
	          title: '修改',
	          shadeClose: true,
	          shade: 0.8,
	          area: ['800px', '60%'],
	          content: 'edit' //iframe的url
	        }); 
	      
	      //同步更新缓存对应的值
	      obj.update({
	        username: '123'
	        ,title: 'xxx'
	      });
	    } else if(layEvent === 'LAYTABLE_TIPS'){
	      layer.alert('Hi，头部工具栏扩展的右侧图标。');
	    }
	  });
	});
</script>
</html>